<template>
    <div id="subjectList">
        <!--搜索框-->
        <div class="interview-header">
            <el-form :inline="true" :model="searchItem"  ref="searchItem" class="demo-form-inline">
                <el-form-item label="订单编号" class="search-item" prop="loanNo">
                    <el-input v-model="searchItem.loanNo" placeholder="订单编号"></el-input>
                </el-form-item>
                <el-form-item label="借款人" class="search-item" prop="realName">
                    <el-input v-model="searchItem.realName" placeholder="借款人"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="projectStatus">
                    <el-select  v-model.numver="searchItem.projectStatus" placeholder="状态">
                        <el-option label="待发标" :value=0></el-option>
                        <el-option label="发标待审核" :value=1></el-option>
                        <el-option label="融资中" :value=2></el-option>
                        <el-option label="满标待审" :value=3></el-option>
                        <el-option label="待放款审核" :value=4></el-option>
                        <el-option label="待创建还款" :value=5></el-option>
                        <el-option label="还款中" :value=6></el-option>
                        <el-option label="已还款" :value=7></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="fa-search" @click="listLoanProject">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="fa-repeat" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--列表-->
        <div class="table-box">
            <div class="export-btn">
                <el-button type="primary" @click="export2Excel">导出</el-button>
            </div>
            <el-table border :data="tableData"  @selection-change="handleSelectionChange">
                <el-table-column label="选择" type="selection" align="center" width="55"></el-table-column>
                <el-table-column align="center" label="序号" type="index"></el-table-column>
                <el-table-column align="center" label="订单编号" prop="loanNo" width="180"></el-table-column>
                <el-table-column align="center" label="产品编号" prop="productNo" width="180"></el-table-column>
                <el-table-column align="center" label="产品名称" prop="productName" width="100"></el-table-column>
                <el-table-column align="center" label="投资期限" prop="loanTime" width="100"></el-table-column>
                <el-table-column align="center" label="预期年化收益" prop="interestRate" width="120"></el-table-column>
                <el-table-column align="center" label="加息奖励年化利率（%）" prop="rewardRate" width="180"></el-table-column>
                <el-table-column align="center" label="起投金额（元）" prop="minAmount" width="120"></el-table-column>
                <el-table-column align="center" label="投资上线" prop="maxAmount"></el-table-column>
                <!--<el-table-column align="center" label="融资总金额" width="110"></el-table-column>-->
                <el-table-column align="center" label="开始时间" prop="beginTime" width="190"></el-table-column>
                <el-table-column align="center" label="结束时间" prop="endTime" width="190"></el-table-column>
                <el-table-column align="center" label="状态" width="120" prop="projectStatus"></el-table-column>
                <!--<el-table-column align="center" label="理财人数" widyh="120"></el-table-column>-->
                <el-table-column align="center" label="截标时间" prop="fullTime" width="190"></el-table-column>
                <!--<el-table-column align="center" label="实际投资金额" width="100"></el-table-column>-->
                <el-table-column align="center" label="借款人详情" width="100">
                    <template scope="scope">
                        <router-link :to="{path: '/apply/borrowerDetails', query: { loanNo: scope.row.loanNo }}" style="color: #20a0ff;"><span>查看</span></router-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发布时间" prop="createTime" width="190"></el-table-column>
                <el-table-column align="center" label="发布人员" prop="operatorNo" width="150"></el-table-column>
                <el-table-column align="center" label="操作" fixed="right" width="150">
                    <template scope="scope">
                        <el-button size="small" type="primary" v-if="scope.row.projectStatus === '发标待审核'" @click="AuditOpen(scope.row)">审核</el-button>
                        <el-button size="small" type="primary" v-else-if="scope.row.projectStatus === '发标待审核'" @click="edit(scope.row)">编辑</el-button>
                        <!--<el-button size="small" type="primary" v-else-if="scope.row.projectStatus === '待生效'" @click="View(scope.row)">查看</el-button>-->
                        <!--<el-button size="small" type="primary" v-else-if="scope.row.projectStatus === '融资中'" @click="sorryDialog = true">暂停</el-button>-->
                        <!--<el-button size="small" type="primary" v-else-if="scope.row.projectStatus === '融资中'" @click="View(scope.row)">查看</el-button>-->
                        <!--<el-button size="small" type="primary" v-else-if="scope.row.projectStatus === '回款中'" @click="View(scope.row)">查看</el-button>-->
                        <el-button size="small" type="primary" v-else @click="View(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="pageNum">
            <el-pagination
                @current-change ="handleCurrentChange"
                @size-change="handleSizeChange"
                :pageNum-sizes="pagesize"
                layout="prev, pager, next, total, sizes"
                :total="total">
            </el-pagination>
        </div>

        <!--发标审核-->
        <el-dialog title="发标审核" :visible.sync="dialogBidAudit" class="dialog">
            <el-form :model="BidAuditInfo" ref="BidAuditInfo" class="el-form" :inline="true" labelWidth="80px">
                <el-form-item label="是否通过" prop="checkStatus" required>
                    <el-radio-group v-model.number="BidAuditInfo.checkStatus">
                        <el-radio :label=1>通过</el-radio>
                        <el-radio :label=0>不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <el-form :model="BidAuditInfo" label-width="80px" :rules="rulesDialog">
                <el-form-item label="面签说明" prop="checkInfo">
                    <el-input type="textarea" v-model="BidAuditInfo.checkInfo" :rows="5" style="width: 473px;" resize="none"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogBidAudit = false">取 消</el-button>
                <el-button type="primary" @click="AuditPass()">确 定</el-button>
            </div>
        </el-dialog>

        <!--暂停功能暂不支持-->
        <el-dialog title="抱歉" :visible.sync="sorryDialog" class="dialog">
            <p>此功能暂不支持，敬请期待！</p>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sorryDialog = false">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { listLoanProject, createCheck } from '@/api/api';
    export default {
        name: "subjectList",
        data () {
            return {
                total: 19,
                pagesize: ["10","30","50"],
                searchItem: {
                    loanNo: "",
                    realName: "",
                    projectStatus: "",
                    pageNum: 1,
                    pageSize: 10
                },
                tableData: [],
                multipleSelection: [],
                // 发表审核弹窗框；
                dialogBidAudit: false,
                BidAuditInfo: {
                    loanNo: "",
                    checkStatus: 1,
                    checkInfo: ""
                },
                rulesDialog: {},
                sorryDialog: false
            };
        },
        methods: {
            // 重置；
            resetForm () {
                this.$refs.searchItem.resetFields();
            },
            // 选中
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 导出
            export2Excel() {
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../vendor/Export2Excel');
                    const tHeader = ['订单编号', '产品编号', '产品名称', '投资期限', '预期年化收益', '加息奖励年化利率', '起投金额', '投资上线', '融资总金额', '开始时间', '结束时间', '状态', '理财人数', '截标时间', '实际投资金额', '计息时间', '发布时间', '发布人员']; // 对应表格输出的title
                    const filterVal = ['loanNo', 'productNo', 'productName', 'loanTime', 'interestRate', 'rewardRate', 'minAmount', 'maxAmount', '', 'beginTime', 'endTime', 'projectStatus', '', 'fullTime', '', 'fullTime', 'createTime', 'operatorNo']; // 对应表格输出的数据
                    const list = this.multipleSelection;
                    const data = this.formatJson(filterVal, list);
                    if (list.length > 0) {
                        export_json_to_excel(tHeader, data, '发标列表excel'); // 对应下载文件的名字
                    } else {
                        this.$message({
                            message: "请选择需要导出的数据",
                            type: 'error'
                        });
                    }
                });
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]));
            },
            // 会员列表、查询
            async listLoanProject () {
                let _this = this;
                await listLoanProject(this.searchItem).then(function(res) {
                    let Data = JSON.parse(res.data.ciphertext);
                    if (Data) {
                        _this.tableData = Data.list;
                        _this.total = Data.total;
                        let arr = _this.tableData;
                        for (let i=0; i<arr.length; i++) {
                            let projectStatus = ["待发标", "发标待审核", "融资中", "满标待审", "待放款审核", "待创建还款", "还款中", "已还款"];
//                            let projectStatus = ["发标待审核", "待生效", "融资中", "还款中", "已还款"];
                            let DateUnit = ["年", "月", "日"];
                            // 状态
                            arr[i].projectStatus = projectStatus[arr[i].projectStatus];

                            // 开始时间
                            if (arr[i].beginTime) {
                                arr[i].beginTime = _this.formatTime(arr[i].beginTime);
                            }
                            // 结束时间
                            if (arr[i].endTime) {
                                arr[i].endTime = _this.formatTime(arr[i].endTime);
                            }
                            // 满标时间
                            if (arr[i].fullTime) {
                                arr[i].fullTime = _this.formatTime(arr[i].fullTime);
                            }
                            if (arr[i].loanTime) {
                                if (arr[i].loanUnit) {
                                    arr[i].loanTime = arr[i].loanTime + DateUnit[arr[i].loanUnit];
                                }
                            }
                            // 创建时间
                            if (arr[i].createTime) {
                                arr[i].createTime = _this.formatTime(arr[i].createTime);
                            }
                        };
                    }
                });
            },
            // 当前页码
            handleCurrentChange(val){
                this.searchItem.pageNum = val;
                this.listLoanProject();
            },
            // 每页条数;
            handleSizeChange(val){
                this.searchItem.pageSize = val;
                this.listLoanProject();
            },
            // 审核通过打开
            AuditOpen (rows) {
                this.dialogBidAudit =true;
                this.BidAuditInfo.loanNo = rows.loanNo;
            },
            // 审核通过、审核不通过；
            async AuditPass () {
                let _this = this;
                await createCheck(this.BidAuditInfo).then((res) => {
                    if (res.data.state.code === "200") {
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        this.dialogBidAudit = false;
                        _this.listLoanProject();
                    } else {
                        _this.$message({
                            message: res.data.state.message,
                            type: 'error'
                        });
                    }
                });
            },
            // 编辑；
            edit (rows) {
                this.$router.push({path: '/asset/assetsMarkOne', query: { loanNo: rows.loanNo }});
            },
            // 查看；
            View (rows) {
                this.$router.push({path: '/apply/borrowerDetails', query: {loanNo: rows.loanNo, userNo: rows.userNo}});
            }
        },
        watch: {
            $route (to) {
                if(to.name === "subjuctList"){
                    this.listLoanProject();
                }
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.listLoanProject();
            });
        }
    };
</script>

<style lang="scss">
    #subjectList{
        .interview-header{
            border: 1px solid #eee;
            margin:20px;
            padding:22px 0 0 20px;
            min-width: 1200px;
            box-sizing: border-box;
            .search-in{
                .search-item{
                    margin-right: 30px;
                }
            }
        }
        .table-box{
            border: 1px solid #eee;
            margin:20px;
            min-width: 1200px;
            .add-btn{
                margin: 20px;
                .el-icon-plus{
                    font-size:12px;
                }
            }
            .export-btn{
                padding: 15px;
            }
        }
        .el-table .cell, .el-table th>div{
            padding:5px;
            white-space: nowrap;
        }
        .pageNum{
            text-align: right;
            padding: 0 10px;
            .el-pagination{
                padding: 0;
            }
        }
        .dialog{
            .el-form {
                width: 564px;
                margin: 0 auto;
            }
        }
    }
</style>
